<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示鼠标单击位置</title>
		<style>
			.mouse{
				position:absolute;
				background:red;
				width: 40px;
				height: 40px;
				left: 100px;
				top: 100px;
				border-radius: 20px;
			}
			.blueviolet{
				background:blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="mouse" class="mouse"></div>
		<script>
			//可以点动了
			var mouse=document.getElementById("mouse");
			mouse.onmousedown=function(){
				mouse.classList.add("blueviolet");
				
				document.onmousemove=function(e){
				
					console.log("X坐标："+e.pageX+"Y坐标"+e.pageY);
					var targetX=e.pageX-mouse.offsetWidth/2;//鼠标可以点进去 小球
					var targetY=e.pageY-mouse.offsetHeight/2;
					mouse.style.left=targetX+"px";
					mouse.style.top=targetY+"px";
					
				}
				mouse.onmouseup=function(){
					mouse.classList.remove("blueviolet")
					
					document.onmousemove=function(){ //清空
						
					}
				}
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			// document.onclick=function(e){
			// 	// document.onmousemove=function(e){ //可以跟着鼠标动 但无法取消
			// 	console.log("X坐标："+e.pageX+"Y坐标"+e.pageY);
			// 	var targetX=e.pageX-mouse.offsetWidth/2;//鼠标可以点进去 小球
			// 	var targety=e.pageY-mouse.offsetHeight/2;
				
			// 	mouse.style.left=targetX+"px";
			// 	mouse.style.top=targetY+"px";
				
			// 	// mouse.style.left=e.pageX+"px";
			// 	// mouse.style.top=e.pageY+"px";
			// }
			
		</script>
	</body>
</html>
